<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>高考加油倒计时</title>

    <style>
        body {
            background: linear-gradient(to bottom, #000000, #333333);
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        #countdown-label {
            font-size: 24px;
        }

        #countdown {
            font-size: 48px;
        }

        #message {
            opacity: 0;
            animation: fade-in 2s forwards;
        }

        @keyframes fade-in {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        #input-box {
            margin-top: 20px;
        }

        #calculate-btn {
            padding-top: 10px;
            padding: 5px 10px;
        }

        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        .snowflake {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            opacity: 0.8;
            pointer-events: none;
            animation: snowfall linear infinite;
        }

        @keyframes snowfall {
            0% {
                transform: translateY(-100%);
            }

            100% {
                transform: translateY(100vh);
            }
        }
    </style>
</head>

<body>
    <div id="countdown-label">距离高考还剩</div>
    <div id="countdown"></div>

    <div id="message">祝好运！</div>

    <div id="input-box">
        <input type="text" id="college-input" placeholder="请输入想考入的院校">
        <button id="calculate-btn">计算</button>
    </div>

    <div id="snow-container"></div>


    <script>
        function updateCountdown() {
            var now = new Date();
            var targetDate = new Date("2024-6-7 9:00");
            var timeDiff = targetDate.getTime() - now.getTime();

            var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

            var coundownLabelElement = document.getElementById("countdown-label");
            coundownLabelElement.textContent = "距离高考还剩";

            var coundownElement = document.getElementById("countdown");
            coundownElement.textContent = days + "天 " + hours + "小时" + minutes + "分钟" + seconds + "秒";

        }

        setInterval(updateCountdown, 1000);

        document.getElementById("calculate-btn").addEventListener("click", function () {
            var collegeInput = document.getElementById("college-input").value;
            var resultElement = document.createElement("div");

            resultElement.textContent = "您考入 " + collegeInput + "的几率是100%！";
            resultElement.style.color = 'red';
            document.body.appendChild(resultElement);
        })

        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.left = Math.random() * window.innerWidth + 'px';
            snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
            snowflake.style.opacity = Math.random();
            snowflake.style.fontSize = Math.random() * 10 + 10 + "px";

            const randomColor = getRandomColor();
            snowflake.style.backgroundColor = randomColor;

            const slogans = ["你的名字那么好听一定会出现再录取通知书上", "人生没有败走的路，每一步都算数", "愿你在合上笔盖的那一刻，有着战士收刀入鞘的骄傲", "高考加油 成功上岸", "我们的青春都会在盛夏绽放", "当我在追光，我与光同行", "当下的坚持会胜过日后的千千万万倍，一定会迎来最终的胜利！", "高考那天所有人会为你的前途让路", "六月好事正酿，愿大家都如愿以偿"];
            snowflake.innerHTML = slogans[Math.floor(Math.random() * slogans.length)];

            return snowflake;
        }

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function snowfall() {
            const snowContainer = document.getElementById('snow-container');
            const numSnowflakes = 50; // Adjust the number of snowflakes here

            for (let i = 0; i < numSnowflakes; i++) {
                const snowflake = createSnowflake();
                snowContainer.appendChild(snowflake);
            }
        }


        snowfall();
    </script>
</body>

</html>